<template>
    <div class="dict">

        <!-- 左侧列表 -->
        <div class="dict-list">
            <div class="dict-list-title">字典目录</div>
            <div class="dict-list-tools">
                <mt-input
                    v-model="search"
                    placeholder="请输入关键字"
                    suffix-icon="el-icon-search">
                </mt-input>
                <mt-button class="btn" @click="addDictFile">新增</mt-button>
            </div>
            <el-tree
                ref="tree"
                :data="dictTree"
                :props="defaultProps"
                node-key="dictTypeId"
                :filter-node-method="filterNode"
                :default-expanded-keys="defaultExpanded"
                :default-checked-keys="defaultChecked"
                class="dict-list--tree"
                @node-click="handleNodeClick">
                <div slot-scope="{ node }" class="tree-node">
                    <div class="tree-node-label">{{ node.label }}</div>
                    <div class="tree-node-op">
                        <div class="tree-node-op-icon" @click="editDictFile(node)">
                            <i class="el-icon-edit" style="font-size: 14px;" />
                        </div>
                        <div class="tree-node-op-icon" @click="deleteDictBtn(node)">
                            <i class="el-icon-delete" />
                        </div>
                    </div>
                </div>
            </el-tree>
        </div>

        <dict-table :name="name" :code="code"></dict-table>

        <!-- 字典目录增改组件 -->
        <add-dicttype ref="addDictType" @refresh="reGetDictList"></add-dicttype>

        <!-- 字典分类组件 -->
        <add-dict ref="DictDialog" @refresh="reGetDictList"></add-dict>
    </div>
</template>

<script>
import AddDicttype from "./addDictType.vue";
import AddDict from "./addDict.vue";
import DictTable from "./list.vue";
export default {
    name: "Dictionary",

    data () {
        return {
            search: "", // 左侧搜索
            dictTree: [], // 左侧列表
            defaultProps: {
                children: "children",
                label: "dictTypeName"
            },
            name: "", // 当前选中字典
            code: "", // 当前选中字典code

            form: {
                value: ""
            },
            list: []
        };
    },

    components: {
        AddDicttype, // 字典目录弹窗
        AddDict, // 字典分类弹窗
        DictTable // 字典值列表
    },

    computed: {
        /* 默认展开第一个字典目录 */
        defaultExpanded () {
            if (this.dictTree && this.dictTree.length) {
                return [this.dictTree[0]["dictCode"]];
            }
            else return [];
        },
        /* 默认选中第一个字典目录 */
        defaultChecked () {
            if (this.dictTree && this.dictTree.length) {
                if (this.dictTree[0].children && this.dictTree[0].children.length) {
                    return [this.dictTree[0].children[0]["dictCode"]];
                }
                else return [];
            }
            else return [];
        }
    },

    watch: {
        search (value) {
            this.$refs.tree.filter(value);
        }
    },

    created () {},

    mounted () {
        this.getDictList();
    },

    methods: {
        /* 获取字典目录列表 */
        async getDictList () {
            const params = {
                dictTypeName: this.search,
                page: 1,
                pageSize: 9999
            };
            this.$request.post(this.API.GET_DICT_CATALOG_LIST, params).then(res => {
                console.log("获取字典列表:", res);
                this.dictTree = res.data.data.map(item => {
                    return {
                        ...item,
                        firstNode: true
                    };
                });
                if (this.dictTree.length) {
                    this.name = this.dictTree[0].dictTypeName;
                    this.code = this.dictTree[0].dictTypeId;
                    this.$nextTick(() => {
                        this.$refs.tree.setCurrentKey(this.code);
                    });
                }
            });
        },

        /* 字典目录列表过滤方法 */
        filterNode (value, data) {
            if (!value) return true;
            return data.children
                ? data["dictName"].includes(value)
                : data["dictName"].includes(value) ||
                data["parentName"].includes(value);
        },

        /* 字典目录列表点击事件 */
        handleNodeClick (data) {
            if (data.firstNode) return;
            this.name = data.dictName;
            this.code = data.typeCode;
        },

        /* 新建字典目录按钮 */
        addDictFile () {
            this.$refs.addDictType.start(true);
        },

        /* 编辑字典类型 || 编辑字典 */
        editDictFile (node) {
            this.$refs.addDictType.start(false, node.data);
        },

        /* 删除字典目录按钮 */
        deleteDictBtn (node) {
            this.$confirm("删除后，所有字典下的内容将丢失。是否删除该字典？", "提示", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning"
            }).then(() => {
                this.deleteDict(node);
            }).catch(() => {});
        },
        /* 删除字典 */
        async deleteDict (node) {
            const params = { dictTypeId: node.data.dictTypeId };
            await this.$request.post(this.API.DELETE_DICT_CATALOG, params).then(res => {
                if (res.success) {
                    this.$mtMessage({ type: "success", message: "删除成功!" });
                    this.getDictList();
                }
            });
        },

        /* 字典目录操作后重置搜索项 */
        reGetDictList () {
            this.search = "";
            this.getDictList();
        }
    }
}
</script>

<style lang="scss">
@import "~@/styles/theme.scss";
.dict {
    display: flex;
    flex: 1;
    height: 100%;
    &-list {
        flex-basis: 20%;
        padding: 0 3rem 4rem 0;
        margin-top: 1rem;
        border-right: 1px solid rgba(226, 227, 231, 0.8);
        overflow: auto;
        &-title {
            font-size: 16px;
            font-weight: 700;
            color: rgba(25, 28, 34, 0.8);
            margin-bottom: 20px;
        }
        &-tools {
            display: flex;
            margin-bottom: 16px;
            .btn {
                margin-left: 1rem;
            }
        }
        .tree-node {
            display: flex;
            justify-content: space-between;
            width: 100%;
            &-label {
                // overflow-x: hidden;
                width: 200px;
                white-space: nowrap;
                overflow: hidden;
                text-overflow: ellipsis;
            }
            &-op {
                display: flex;
                margin-right: 2.4rem;
                &-icon {
                    font-size: 14px;
                    padding: 0 5px;
                    width: 24px;
                    cursor: pointer;
                    &:hover {
                        color: #409eff;
                    }
                }
            }
        }
    }
}
</style>